<% if params.key?("error") %>
  <div class="alert alert-danger">
    <%= params["error"] %>
  </div>
<% end %>

<% if @feature.description %>
  <div class="row mb-4">
    <div class="col">
      <div class="card">
        <div class="card-body">
          <%== Sanitize.fragment(@feature.description, Sanitize::Config::BASIC) %>
        </div>
      </div>
    </div>
  </div>
<% end %>

<div class="row mb-4">
  <div class="col">
    <div class="card">
      <%# Gate State Header %>
      <div class="card-header">
        <div class="row align-items-center">
          <h4 class="col text-truncate mb-0"><%= feature_name %></h4>
          <div class="col-auto">
            <span class="status <%= @feature.color_class %> me-2"></span>
            <%= @feature.gate_state_title %>
          </div>
        </div>
      </div>

      <% unless @feature.boolean_value %>
        <%# Actors Info and Form %>
        <div class="card-body border-bottom">
          <div class="row align-items-center js-toggle-container">
            <div class="col col-me-auto toggle-block-when-off">
              <h6 class="m-0">
                <strong class="<%= "text-muted" if @feature.actors_value.empty? %>">
                  <% if @feature.actors_value.count > 0 %>
                    Enabled for <%= Util.pluralize @feature.actors_value.count, 'actor', 'actors' %>
                  <% else %>
                    No actors enabled
                  <% end %>
                </strong>
              </h6>
            </div>
            <% if write_allowed? %>
              <div class="col col-auto toggle-block-when-off">
                <button class="btn btn-outline-secondary js-toggle-trigger" data-bs-toggle="collapse" data-bs-target="#add-actor">Add an actor</button>
              </div>
              <div class="col toggle-block-when-on">
                <form action="<%= script_name %>/features/<%= Flipper::UI::Util.escape @feature.key %>/actors" method="post" class="row">
                  <%== csrf_input_tag %>
                  <input type="hidden" name="operation" value="enable">
                  <div class="col">
                    <input type="text" name="value" placeholder="<%= Flipper::UI.configuration.add_actor_placeholder %>" class="form-control">
                  </div>
                  <div class="col-auto">
                    <input type="submit" value="Add Actor" class="btn btn-primary">
                  </div>
                </form>
              </div>
              <div class="col col-auto toggle-block-when-on">
                <button type="button" class="btn btn-outline-secondary js-toggle-trigger">Cancel</button>
              </div>
            <% end %>
          </div>
        </div>

        <%# Actors list %>
        <% @feature.actors_value.each do |item| %>
          <div class="card-body bg-lightest border-bottom py-3">
            <div class="row align-items-center">
              <div class="col col-me-auto ps-md-5">
                <h6 class="m-0">
                  <% if Flipper::UI::Util.present?(@feature.actor_names[item]) %>
                    <%== Sanitize.fragment("#{@feature.actor_names[item]} (#{item})", Sanitize::Config::BASIC) %>
                  <% else %>
                    <%= item %>
                  <% end %>
                </h6>
              </div>
              <div class="col col-auto">
                <% if write_allowed? %>
                  <form action="<%= script_name %>/features/<%= Flipper::UI::Util.escape @feature.key %>/actors" method="post">
                    <%== csrf_input_tag %>
                    <input type="hidden" name="operation" value="disable">
                    <input type="hidden" name="value" value="<%= item %>">
                    <button type="submit" value="Disable" class="btn btn-outline-danger" data-bs-toggle="tooltip" title="Disable <%= item %>" data-bs-placement="left">
                      Remove
                    </button>
                  </form>
                <% end %>
              </div>
            </div>
          </div>
        <% end %>

        <%# Groups Info and Form %>
        <div class="card-body border-bottom">
          <div class="row align-items-center js-toggle-container">
            <div class="col col-me-auto toggle-block-when-off">
              <h6 class="m-0">
                <strong class="<%= "text-muted" if @feature.groups_value.empty? %>">
                  <% if @feature.groups_value.count > 0 %>
                    Enabled for <%= Util.pluralize @feature.groups_value.count, 'group', 'groups' %>
                  <% else %>
                    No groups enabled
                  <% end %>
                </strong>
              </h6>
            </div>
            <% if write_allowed? %>
              <div class="col col-auto toggle-block-when-off">
                <button class="btn btn-outline-secondary js-toggle-trigger" data-bs-toggle="collapse" data-bs-target="#add-actor">Add a group</button>
              </div>
              <div class="col collapse toggle-block-when-on">
                <% if @feature.disabled_groups.empty? %>
                  All groups enabled.
                <% else %>
                  <form action="<%= script_name %>/features/<%= Flipper::UI::Util.escape @feature.key %>/groups" method="post" class="row">
                    <%== csrf_input_tag %>
                    <input type="hidden" name="operation" value="enable">
                    <div class="col">
                      <select name="value" class="form-select">
                        <option value="">Select a group...</option>
                        <% @feature.disabled_groups.sort_by(&:name).each do |group| %>
                          <option value="<%= group.name %>"><%= group.name %></option>
                        <% end %>
                      </select>
                    </div>
                    <div class="col-auto"><input type="submit" value="Add Group" class="btn btn-primary btn"></div>
                  </form>
                <% end %>
              </div>
              <div class="col col-auto toggle-block-when-on">
                <button type="button" class="btn btn-outline-secondary js-toggle-trigger">Cancel</button>
              </div>
            <% end %>
          </div>
        </div>

        <%# Groups list %>
        <% @feature.groups_value.each do |item| %>
          <div class="card-body bg-lightest border-bottom py-3">
            <div class="row align-items-center">
              <div class="col col-me-auto ps-md-5">
                <h6 class="m-0"><%= item %></h6>
              </div>
              <div class="col col-auto">
                <% if write_allowed? %>
                  <form action="<%= script_name %>/features/<%= Flipper::UI::Util.escape @feature.key %>/groups" method="post">
                    <%== csrf_input_tag %>
                    <input type="hidden" name="operation" value="disable">
                    <input type="hidden" name="value" value="<%= item %>">
                    <button type="submit" value="Disable" class="btn btn-outline-danger" data-bs-toggle="tooltip" title="Disable <%= item %>" data-bs-placement="left">
                      Remove
                    </button>
                  </form>
                <% end %>
              </div>
            </div>
          </div>
        <% end %>

        <%# % of Actors %>
        <div class="js-toggle-container">
          <div class="card-body border-bottom">
            <div class="row align-items-center">
              <div class="col col-me-auto">
                <h6 class="m-0"><strong class="<%= "text-muted" unless @feature.percentage_of_actors_value > 0 %>">Enabled for <%= @feature.percentage_of_actors_value %>% of actors</strong></h6>
              </div>
              <% if write_allowed? %>
                <div class="col col-auto toggle-block-when-off">
                  <button class="btn btn-outline-secondary js-toggle-trigger">Edit</button>
                </div>
                <div class="col col-auto toggle-block-when-on">
                  <button class="btn btn-outline-secondary js-toggle-trigger">Hide</button>
                </div>
              <% end %>
            </div>
          </div>

          <% if write_allowed? %>
            <div class="card-body border-bottom toggle-block-when-on bg-lightest">
              <div class="row align-items-center">
                <form action="<%= script_name %>/features/<%= Flipper::UI::Util.escape @feature.key %>/percentage_of_actors" method="post" class="col">
                  <%== csrf_input_tag %>
                  <div class="btn-group">
                    <% @percentages.each do |number| %>
                      <input type="submit" name="value" value="<%= number %>%" class="btn btn-light" <% if number == @feature.percentage_of_actors_value %>disabled<% end %>>
                    <% end %>
                  </div>
                </form>
                <form action="<%= script_name %>/features/<%= Flipper::UI::Util.escape @feature.key %>/percentage_of_actors" method="post" class="col-auto row">
                  <%== csrf_input_tag %>
                  <div class="col-auto">
                    <input style="width:5em;" type="number" max="100" min="0" name="value" <% if @feature.percentage_of_actors_value > 0 %>value="<%= @feature.percentage_of_actors_value %>"<% end %> title="Custom percentage (26, 32, etc.)" placeholder="0" class="form-control">
                  </div>
                  <div class="col-auto ms-auto"><input type="submit" name="action" value="Save" class="btn btn-primary"></div>
                </form>
              </div>
            </div>
          <% end %>
        </div>

        <%# % of Time %>
        <div class="js-toggle-container">
          <div class="card-body border-bottom">
            <div class="row align-items-center">
              <div class="col col-me-auto">
                <h6 class="m-0"><strong class="<%= "text-muted" unless @feature.percentage_of_time_value > 0 %>">Enabled for <%= @feature.percentage_of_time_value %>% of time</strong></h6>
              </div>
              <% if write_allowed? %>
                <div class="col col-auto toggle-block-when-off">
                  <button class="btn btn-outline-secondary js-toggle-trigger">Edit</button>
                </div>
                <div class="col col-auto toggle-block-when-on">
                  <button class="btn btn-outline-secondary js-toggle-trigger">Hide</button>
                </div>
              <% end %>
            </div>
          </div>

          <% if write_allowed? %>
            <div class="card-body border-bottom toggle-block-when-on bg-lightest">
              <div class="row align-items-center">
                <form action="<%= script_name %>/features/<%= Flipper::UI::Util.escape @feature.key %>/percentage_of_time" method="post" class="col">
                  <%== csrf_input_tag %>
                  <div class="btn-group">
                    <% @percentages.each do |number| %>
                      <input type="submit" name="value" value="<%= number %>%" class="btn btn-light" <% if number == @feature.percentage_of_time_value %>disabled<% end %>>
                    <% end %>
                  </div>
                </form>
                <form action="<%= script_name %>/features/<%= Flipper::UI::Util.escape @feature.key %>/percentage_of_time" method="post" class="col-auto row">
                  <%== csrf_input_tag %>
                  <div class="col-auto">
                    <input style="width:5em;" type="number" max="100" min="0" name="value" <% if @feature.percentage_of_time_value > 0 %>value="<%= @feature.percentage_of_time_value %>"<% end %> title="Custom percentage (26, 32, etc.)" placeholder="0" class="form-control">
                  </div>
                  <div class="col-auto ms-auto"><input type="submit" name="action" value="Save" class="btn btn-primary"></div>
                </form>
              </div>
            </div>
          <% end %>
        </div>
      <% end %>

      <% if write_allowed? %>
        <div class="card-body">
          <form action="<%= script_name %>/features/<%= Flipper::UI::Util.escape @feature.key %>/boolean" method="post">
            <%== csrf_input_tag %>

            <div class="row">
              <% unless @feature.boolean_value %>
                <div class="col d-grid">
                  <button type="submit" name="action" value="Enable" class="btn btn-outline-success"
                    <% if Flipper::UI.configuration.confirm_fully_enable %>
                      data-confirmation-prompt="Are you sure you want to fully enable this feature for everyone? Please enter the name of the feature to confirm it: <%= feature_name %>"
                      data-confirmation-text="<%= feature_name %>"
                    <% end %>
                  >
                    <span class="d-block" data-bs-toggle="tooltip" title="Enable for everyone">
                      Fully Enable
                    </span>
                  </button>
                </div>
              <% end %>

              <% unless @feature.off? %>
                <div class="col d-grid">
                  <button type="submit" name="action" value="Disable" class="btn btn-outline-danger"
                    <% if Flipper::UI.configuration.confirm_disable %>
                      data-confirmation-prompt="Are you sure you want to disable this feature for everyone? Please enter the name of the feature to confirm it: <%= feature_name %>"
                      data-confirmation-text="<%= feature_name %>"
                    <% end %>
                  >
                    <span class="d-block" data-bs-toggle="tooltip" title="Disable for everyone by clearing all percentages, groups and actors.">
                      Disable
                    </span>
                  </button>
                </div>
              <% end %>
            </div>
          </form>
        </div>
      <% end %>
    </div>
  </div>
</div>

<% if write_allowed? && Flipper::UI.configuration.feature_removal_enabled %>
  <div class="row">
    <div class="col">
      <div class="card border">
        <h4 class="card-header"><%= Flipper::UI.configuration.delete.title %></h4>
        <div class="card-body">
          <p>
            <%= Flipper::UI.configuration.delete.description %>
          </p>
          <form action="<%= script_name %>/features/<%= Flipper::UI::Util.escape @feature.key %>" method="post">
            <%== csrf_input_tag %>
            <input type="hidden" id="feature_name" name="_feature" value="<%= feature_name %>">
            <input type="hidden" name="_method" value="DELETE">
            <button type="submit" name="action" value="Delete" id="delete_feature__button" class="btn btn-outline-danger" data-bs-toggle="tooltip" data-bs-placement="right"
              data-confirmation-prompt="Are you sure you want to remove this feature from the list of features and disable it for everyone? Please enter the name of the feature to confirm it: <%= feature_name%>"
              data-confirmation-text="<%= feature_name %>"
              title="Remove feature from list of features and disable it."
            >
              Delete
            </button>
          </form>
        </div>
      </div>
    </div>
  </div>
<% end %>
